import './index.css'
import Navigation from '../../components/Navigation';

import Hzpp from '../../components/hzpp';
import Title from '../../components/Zuanqu/Title/index'
import Box from '../../components/Zuanqu/Box/index'
// 在线印刷
const Onlineprinting = () => {
  // 定制
  const img=[
     {
      img:"https://pub-cdn-oss.chuangkit.com/print/home_page_theme/1661479859182"
    },
  ]
  const list=[
   
    {
      img:"https://pub-cdn-oss.chuangkit.com/print/home_page_theme/1652960484322",
      title:"企业画册",
      name:"详情客服"
    },
     {
      img:"https://pub-cdn-oss.chuangkit.com/print/home_page_theme/1646287564780",
      title:"手提带定制",
      name:"详情客服"
    },
     {
      img:"https://pub-cdn-oss.chuangkit.com/print/home_page_theme/1635833642647",
      title:"一次性纸杯",
      name:"详情客服"
    },
     {
      img:"https://pub-cdn-oss.chuangkit.com/print/home_page_theme/1652960596122",
      title:"对折页",
      name:"详情客服"
    },
    {
      img:"https://pub-cdn-oss.chuangkit.com/print/home_page_theme/1652960484322",
      title:"定制T血",
      name:"详情客服"
    },
     {
      img:"https://pub-cdn-oss.chuangkit.com/print/home_page_theme/1646287564780",
      title:"三折页",
      name:"详情客服"
    },
     {
      img:"https://pub-cdn-oss.chuangkit.com/print/home_page_theme/1635833642647",
      title:"工作证",
      name:"详情客服"
    },
     {
      img:"https://pub-cdn-oss.chuangkit.com/print/home_page_theme/1635833642647",
      title:"企业文化封套",
      name:"详情客服"
    },
  ]
  // 包装
  const img1=[
    {
      img1:'https://pub-cdn-oss.chuangkit.com/print/home_page_theme/1646286336308'
    }
  ]

  const list1=[
    {
      img:"https://pub-cdn-oss.chuangkit.com/print/home_page_theme/1665998259956",
      title:"企业画册",
      name:"详情客服"
    },
     {
      img:"https://pub-cdn-oss.chuangkit.com/print/home_page_theme/1665997739844",
      title:"企业画册",
      name:"详情客服"
    },
     {
      img:"https://pub-cdn-oss.chuangkit.com/print/home_page_theme/1665997739844",
      title:"企业画册",
      name:"详情客服"
    },
     {
      img:"https://pub-cdn-oss.chuangkit.com/print/home_page_theme/1665997766235",
      title:"企业画册",
      name:"详情客服"
    },
     {
      img:"https://pub-cdn-oss.chuangkit.com/print/home_page_theme/1652960484322",
      title:"企业画册",
      name:"详情客服"
    },
     {
      img:"https://pub-cdn-oss.chuangkit.com/print/home_page_theme/1642939686545",
      title:"企业画册",
      name:"详情客服"
    },
  ]
    return (
        <div className='box3'>
            {/* 头部 */}

            <div className="header">
                <div className="header_top">
                    <img src='https://pub-cdn-oss.chuangkit.com/ad_position/62c4b77d47f845e0988ea47a07a70599'></img>
                </div>
                <div className='header_bottom'>
                    <Navigation></Navigation>
                </div>

            </div>

            {/* 主盒子 */}
            <div className="mian">
                {/*tab栏的切换  */}
                <div className='tav'>
                    <div className='tav_left'>
                        <p><span>品牌宣传物料</span><span>》</span>
                            <div className='tav1'>
                               <div>
                                <img src="../src/assets/images/1712.png" alt="" />

                               </div>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />
                                
                               </div>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />
                                
                               </div>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />
                                
                               </div>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />
                                
                               </div>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />
                                
                               </div>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />
                                
                               </div>
                            </div>
                        </p>
                        <p><span>24h 加急发货</span><span>》</span>
                         <div className='tav2'>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />

                               </div>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />
                                
                               </div>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />
                                
                               </div>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />
                                
                               </div>
                            </div></p>
                        <p><span>线下营销物料</span><span>》</span>
                         <div className='tav3'>
                                  <div>
                                <img src="../src/assets/images/1712.png" alt="" />

                               </div>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />
                                
                               </div>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />
                                
                               </div>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />
                                
                               </div>
                            </div></p>
                        <p><span>企业定制物料</span><span>》</span>
                         <div className='tav4'>
                                   <div>
                                <img src="../src/assets/images/1712.png" alt="" />

                               </div>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />
                                
                               </div>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />
                                
                               </div>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />
                                
                               </div>
                                  <div>
                                <img src="../src/assets/images/1712.png" alt="" />

                               </div>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />
                                
                               </div>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />
                                
                               </div>
                                 <div>
                                <img src="../src/assets/images/1712.png" alt="" />
                                
                               </div>
                            </div></p>
                        <p><span>包装礼品定制</span><span>》</span>
                         <div className='tav5'>

                            </div></p>
                        <p><span>个性定制商品</span><span>》</span>
                         <div className='tav6'>

                            </div></p>
                    </div>
                    <div className='tav_right'>
                        <img src="../src/assets/images/2222.png" alt="" />
                    </div>
                </div>
                {/* tab下的图片 */}
                <div className='tav_img'>
                  <img src="../src/assets/images/537.png" alt="" />
                </div>
                {/* 专区 */}
                <div className='zhuanqu'>
                  <div className='zqu1'>
                      <div className='title'>
                        <Title title="企业定制" name='企业独家定制，提升企业形象'></Title>
                      </div>
                      <div className='zqu1-box'>
                         <Box list={list} img={img[0].img}></Box>
                      </div>
                  </div>

                  <div className='zqu2'>
                       <div className='title'>
                        <Title title="包装定制" name='包装业务上线'></Title>
                      </div>
                      <div className='zqu1-box'>
                         <Box list={list1} img={img1[0].img1}></Box>
                      </div>
                  </div>
                  <div className='zqu3'>
                       <div className='title'>
                        <Title title="个性定制" name='包装业务上线'></Title>
                      </div>
                      <div className='zqu1-box'>
                         <Box list={list1} img={img1[0].img1}></Box>
                      </div>
                  </div>
                </div>
                {/* 合作品牌 */}
                <div className='hzpp'>
                  <Hzpp>
                    
                  </Hzpp>
                </div>

            </div>
            {/* 底部上方文字图片 */}
            <div className='footer_top'>
              <div className='footer_box'>
                  <div>
                      设计无忧
                  </div>
                   <div>
                      物美价廉
                  </div>
                   <div>
                      闪电速度
                  </div>
                   <div>
                      售后保障
                  </div>
              </div>
            </div>
            {/* 底部 */}
            <div className='footer'>
                <div className='footer_top'>
                    <div className="footerleft">
                        <p className='p'><span>用户须知</span> <span>支付与发票</span> <span>配送与售后</span> <span>常见问题</span></p>
                        <p className='p1'><span>印刷协议</span> <span>安全支付</span> <span>配送服务</span> <span>印刷常见问题</span></p>
                         <p className='p1'><span>服务介绍</span> <span>发票问题</span> <span>售后服务</span> <span>印刷注意事项</span></p>
                         <p style={{marginLeft:'50px'}}><span>优惠卷说明</span></p>
                         <p style={{marginLeft:'50px'}}><span>下单流程</span></p>
                    </div>
                     <div className="footerright">
                        <p><h2>400-871-8211</h2></p>
                        <p>周一至周五 09：30-19:30</p>

                     </div>
                </div>
                <div className='footer_bottom'>
                <img src='../src/assets/images/0909.png'></img>
                </div>
            </div>
        </div>
    )
}

export default Onlineprinting;